<template>
  <div style="position: relative; height: 100%">
    <!-- <a-spin
      v-if="loading"
      :spinning="loading"
      style="
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        background: rgba(255, 255, 255, 0.5);
      "
    /> -->
    <pre><code class="nohighlight" v-html="html"></code></pre>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import axios from 'axios'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import { message as Message } from 'ant-design-vue'

let props = defineProps({
  content: {
    required: true,
  },
})

let html = ref()
watch(
  () => props.content,
  c => {
    if (c) {
      try {
        html.value = hljs.highlightAuto(c).value
      } catch (e) {
        Message.error('渲染失败!')
      }
    }
  },
  { immediate: true },
)

// let loading = ref(false)

// onMounted(() => {
//   loading.value = true
//   axios.get(props.path, { responseType: 'blob' }).then(response => {
//     let reader = new FileReader()
//     // 读取文件中的内容，执行读文件函数，设置编码格式。
//     reader.readAsText(response.data, 'UTF-8')
//     // 读取文件，得到文件内容。
//     reader.onload = function (e) {
//       let content = e.target.result
//       html.value = hljs.highlightAuto(content).value
//       loading.value = false
//     }
//   })
// })
</script>
